<template>
	<view class="content">

		<view class="info" v-for="item in list.array" @click="goPersonAdd(item.personId)">
			<view class="left">
				<view class="name">
					姓名:{{item.nickname}}
				</view>
				<view class="number">
					工种:{{item.type}}
				</view>
				<view class="phone">
					手机号码:{{item.phone}}
				</view>
				
			</view>
			<view class="status" v-if="item.status==1">
				<text >
					在职
				</text>
			</view>
			<view class="status" v-else>
				<text  style="background-color: #F05C3E;color: white;">
					离职
				</text>
			</view>

		</view>
		<view class="goRepair" @click="goPersonAdd()">
			<image src="../../../static/icon/add.png"></image>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue'
	import {
		onLoad,
		onShow
	} from "@dcloudio/uni-app";
	import api from '@/api/api'
	let list=reactive({
		array:[]
	})
	onShow(()=>{
		api.getpersonList({}).then(res=>{
			if(res.status==200){
				list.array=res.data
			}
		})
	})
	
	const goPersonAdd = (id) => {
		let url='/pages/admin/person/personadd'
		if(id){
			url='/pages/admin/person/personadd?personId='+id
		}
		uni.navigateTo({
			url: url
		})
	}
</script>

<style lang="scss">
	.content {
		margin: 30rpx;

		.info {
			margin-bottom: 20rpx;
			padding: 20rpx;
			border-radius: 16rpx;
			display: flex;
			justify-content: space-between;
			background-color: white;
			box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(131, 130, 130, 0.28);

			.left {
				flex: 1;

				.name {
					font-size: 32rpx;
					font-weight: bold;
				}

				view {
					color: #666666;
					padding-bottom: 20rpx;
				}
			}

			.status {
				display: flex;
				align-items: center;
				justify-content: center;
				line-height: 100%;

				text {
					padding: 10rpx 20rpx;
					background-color: #56dba4;
					color: white;
					border-radius: 30rpx;

				}


			}

		}

		.goRepair {
			position: fixed;
			bottom: 150rpx;
			right: 80rpx;

			image {
				width: 100rpx;
				height: 100rpx;
			}
		}
	}
</style>
